<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>生鲜商城</title>
    <!-- 引入样式 -->
    <link
            rel="stylesheet"
            href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/jquery.js"></script>

</head>
<body>
<el-container id="app">
    <!--头部导航 -->
    <el-header style="height:510px">
        <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
        >
            <div class="demo-image">
                <div class="block" :key="img.headbg">
                    <el-image
                            style="width: 1920px; height: 440px"
                            :src="img.headbg"
                            :fit="img.headbg">
                    </el-image>
                </div>
            </div>
            <el-menu-item index="0">首页</el-menu-item>
            <el-menu-item index="1">用户</el-menu-item>
            <el-menu-item index="2">商品</el-menu-item>
            <el-menu-item index="3">优惠券</el-menu-item>
            <el-menu-item index="4">秒杀</el-menu-item>
            <el-menu-item index="5">数据统计</el-menu-item>
            <el-menu-item index="6"><a href="/logout">登出</a></el-menu-item>
        </el-menu>
        <div class="line"></div>
    </el-header>
    <!-- 主体部分 请在下方写代码 -->
    <el-main>
        <!--用户信息列表-->
        <template>
            <el-tabs :tab-position="tabPosition">

                <el-tab-pane label="用户信息列表">
                    <el-form :inline="true"  class="demo-form-inline" >
                        <el-form-item >
                            <el-input  placeholder="请输入姓名" v-model="user.userName"></el-input>
                        </el-form-item>
                        <el-form-item >
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                        <el-form-item >
                            <el-button type="primary" @click="selectAllUser">查询所有</el-button>
                        </el-form-item>
                    </el-form>
                <!--数据-->
                    <el-table
                            :data="tableData"
                            stripe
                            border
                            style="width: 100%;margin:0 auto;text-align: center"
                            :default-sort = "{prop: 'couponId',}"
                    >
                        <el-table-column
                                prop="userLastLogintime"
                                label="最近一次登录时间"
                                sortable
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="userId"
                                label="用户编号"
                                width="180">
                        </el-table-column>

                        <el-table-column
                                prop="userName"
                                label="姓名"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="userPhone"
                                label="电话">
                        </el-table-column>
                        <el-table-column
                                prop="userScore"
                                label="积分">
                        </el-table-column>

                    </el-table>

                    <!--分页-->
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            :current-page="pageIndex"
                            :total="pageCount" :page-size="pageSize"
                            @current-change="jump"
                    >
                    </el-pagination>

                </el-tab-pane>

               <!-- 用户订单-->
                <el-tab-pane label="用户订单详情列表">
                    <el-form :inline="true" left  class="demo-form-inline" style="height: 70px;margin-left: 0px; margin-bottom: 0px">

                        <el-form-item>
                            <label style="margin-right: 10px">订单状态:</label> <el-select v-model="ordersDetail.ordersStatus" placeholder="请选择">
                            <el-option label="未支付" value="未支付"></el-option>
                            <el-option label="已支付" value="已支付"></el-option>
                            <el-option label="已提货" value="已提货"></el-option>
                            <el-option label="已退货" value="已退货"></el-option>
                        </el-select>
                        </el-form-item>
                        <el-form-item style="width: 300px;height: 50px; margin-bottom: 0px">
                            <el-input  placeholder="请输入姓名" v-model="ordersDetail.userName"></el-input>
                        </el-form-item>
                        <el-form-item style="width: 300px;height: 50px; margin-bottom: 0px">
                            <el-input  placeholder="请输入电话" v-model="ordersDetail.userPhone"></el-input>
                        </el-form-item>
                        <el-form-item style="height: 50px; margin-bottom: 0px">
                            <el-button type="primary" @click="onSubmitOrders">查询</el-button>
                        </el-form-item>
                        <el-form-item style="height: 50px; margin-bottom: 0px">
                            <el-button type="primary" @click="selectAllOrders">查询所有</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table
                            :data="tableOrderData"
                            stripe
                            border
                            style="width: 100%;margin:0 auto;"
                    >
                        <el-table-column
                                prop="ordersId"
                                label="订单编号"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="userId"
                                label="用户编号"
                                width="120">
                        </el-table-column>

                        <el-table-column
                                prop="userName"
                                label="姓名"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="userPhone"
                                label="电话"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="ordersStatus"
                                label="订单状态"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="ordersTotalprice"
                                label="总金额"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="ordersTotalpriceActual"
                                label="实付金额"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="ordersPickupTime"
                                label="预计提货时间"
                                width="160">
                        </el-table-column>
                        <el-table-column
                                prop="ordersPickupTimeActual"
                                label="实际提货时间"
                                width="160">
                        </el-table-column>
                        <el-table-column
                                prop="ordersPickupPhone"
                                label="提货人电话"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="ordersPickupAddress"
                                label="提货地址"
                                width="200">
                        </el-table-column>
                    </el-table>

                    <!--分页-->
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            :current-page="pageIndexOrders"
                            :total="pageCountOrders" :page-size="pageSizeOrders"
                            @current-change="jumpOrder"
                    >
                    </el-pagination>

                </el-tab-pane>

            </el-tabs>
        </template>

    </el-main>
</el-container>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            //此处请改为对应的选项
            activeIndex: "1",
            img: {
                headbg: '/img/bg/banner3back.jpg',
            },
            tabPosition: 'left',
            tableData:[],
            pageIndex:1,
            pageCount:0,
            pageSize:0,
            user:{
                userId:'',
                userName:'',
                userPhone:'',
                userScore:'',
                userLastLogintime:''
            },
            //用户订单
            tableOrderData:[],
            pageIndexOrders:0,
            pageCountOrders:0,
            pageSizeOrders:0,
            ordersDetail:{
                ordersId:'',
                userId:'',
                userName:'',
                userPhone:'',
                ordersStatus:'',
                ordersTotalprice:'',
                ordersTotalpriceActual:'',
                ordersPickupPhone:'',
                ordersPickupAddress:'',
                ordersPickupTime:'',
                ordersPickupTimeActual:''
            },
        },
        methods: {
            //导航 添加中
            handleSelect: function (key, keyPath) {
                console.log(key, keyPath);
                if(key==0){
                    window.location.href="/index"
                }else if(key==1){
                    window.location.href="/user"
                }else if(key==2){
                    window.location.href="/product"
                }else if(key==3){
                    window.location.href="/coupon"
                }else if(key==4){
                    window.location.href="/limited"
                }else if(key==5){
                    window.location.href="/statistics"
                }else if(key==6){
                    $.ajax({
                        url:"/logout",
                    })
                }
            },

            doPageQuery:function(selectCondition){
                let vs = this;
                $.ajax({
                    url:"/freshmarket/user/showPage",
                    type:"get",
                    dataType:"json",
                    data:selectCondition,
                    success:function(resp){
                        //console.log(resp);
                        if(resp.success){
                            //页面数据
                            vs.tableData = resp.content;
                            //总条数
                            vs.pageCount=resp.pageCount;
                            console.log("总条数"+vs.pageCount);
                            //当前页
                            vs.pageIndex = resp.pageIndex;
                            //每页显示的条数
                            vs.pageSize=resp.pageSize;
                        }

                    }
                });
            },
            //用户条件查询
            onSubmit:function(){
                let vs = this;
                var selectCondition={userName:vs.user.userName, userPhone:vs.user.userPhone};
                this.doPageQuery(selectCondition);
            },
            jump:function(pageIndex){
                console.log(pageIndex);
                let vs = this;
                var selectCondition={userName:vs.user.userName, userPhone:vs.user.userPhone,pageIndex:pageIndex};
                //向后端发送请求
                this.doPageQuery(selectCondition);
            },
            selectAllUser:function(){
                this.doPageQuery({});
                this.user.userName='';
            },

            //用户订单详情查询
            doPageQueryOrders:function(selectOrders){
                let vs = this;
                $.ajax({
                    url:"/freshmarket/orders/showPageOders",
                    type:"get",
                    dataType:"json",
                    data:selectOrders,
                    success:function(resp){
                        console.log(resp);
                        if(resp.success){
                            //页面数据
                            vs.tableOrderData = resp.content;
                            //总条数
                            vs.pageCountOrders=resp.pageCount;
                            console.log("总条数"+vs.pageCountOrders);
                            //当前页
                            vs.pageIndexOrders = resp.pageIndex;

                            //每页显示的条数
                            vs.pageSizeOrders=resp.pageSize;
                        }

                    }
                });
            },
            //条件查询
            onSubmitOrders:function(){
                let vs = this;
                let od = vs.ordersDetail;
                var selectOrders={userId:od.ordersId,userName:od.userName, userPhone:od.userPhone,ordersStatus:od.ordersStatus};
                vs.doPageQueryOrders(selectOrders);
            },
            jumpOrder:function(pageIndexOrders){
                console.log(pageIndexOrders);
                let vs = this;
                let od = vs.ordersDetail;
                var selectOrders={userId:od.ordersId,userName:od.userName, userPhone:od.userPhone,ordersStatus:od.ordersStatus,pageIndex:pageIndexOrders};
                //向后端发送请求
                this.doPageQueryOrders(selectOrders);
            },
            selectAllOrders:function(){
                this.doPageQueryOrders({});
                this.ordersDetail.ordersStatus='';
                this.ordersDetail.userName='';
                this.ordersDetail.userPhone='';
            }

        },
        //生命周期初始化
        mounted: function () {
            this.doPageQuery({});
            this.doPageQueryOrders({});
        },
    });
</script>
</body>
</html>
